<template>
  <div class="dice-control">
    <el-row class="mb-20">
      <el-button type="primary" @click="roll" :disabled="isRolling">
        摇骰子
      </el-button>
      <el-button-group class="ml-20">
        <el-button @click="decreaseDice" :disabled="diceCount <= 1">
          <el-icon><Minus /></el-icon>
        </el-button>
        <el-button disabled>{{ diceCount }}个骰子</el-button>
        <el-button @click="increaseDice" :disabled="diceCount >= 6">
          <el-icon><Plus /></el-icon>
        </el-button>
      </el-button-group>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Plus, Minus } from '@element-plus/icons-vue'

const emit = defineEmits(['roll', 'dice-count-change'])
const isRolling = ref(false)
const diceCount = ref(1)

const roll = () => {
  isRolling.value = true
  emit('roll')
  setTimeout(() => {
    isRolling.value = false
  }, 1000)
}

const increaseDice = () => {
  if (diceCount.value < 6) {
    diceCount.value++
    emit('dice-count-change', diceCount.value)
  }
}

const decreaseDice = () => {
  if (diceCount.value > 1) {
    diceCount.value--
    emit('dice-count-change', diceCount.value)
  }
}
</script>

<style lang="scss" scoped>
.dice-control {
  margin: 20px 0;
  .mb-20 {
    margin-bottom: 20px;
  }
  .ml-20 {
    margin-left: 20px;
  }
}
</style> 